<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-10-10 16:12:03
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-10-26 17:01:19
 * @FilePath: \湖北省引江济汉工程管理局资产大屏\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- 引入vue -->
    <script src="./js/vue.js"></script>
    <script src="./js/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #000;
        }

        .Mo_ban {
            width: 350px;
            height: 185px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            box-sizing: border-box;
            border: 1px solid #FFFFFF;
            display: flex;
            position: relative;
        }

        #Mo_ban_img {
            width: 152px;
            height: 100%;
        }

        #Mo_ban_box {
            margin-left: 10px;
            width: 200px;
            height: 100%;
            font-size: 16px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-left: 20px;
        }

        #Mo_ban_box>div {
            margin-bottom: 10px;
        }

        #Mo_ban_look {
            display: inline-block;
            padding: 5px 21px;
            font-size: 15px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: rgb(16, 185, 214);
            border: none;
            border-radius: 27px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="warp">
        <div id="chart_map" style="height:100%; width:100%"></div>
    </div>
    </div>
</body>

</html>
<script src="./js/echarts.min.js"></script>
<script src="./js/hubei.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                hubeiData: [
                    {
                        "lat": 31.957497,
                        "lng": 112.37377,
                        "name": "吃饭",
                        "url": 'image://img/icon/icon1.png',
                        "src": "./img/1.png",
                        'id': "1",
                        'qu_name': "吃饭吃饭"

                    },

                    {
                        "lat": 30.557497,
                        "lng": 113.37377,
                        "name": "睡觉",
                        "url": 'image://img/icon/icon2.png',
                        'id': "2",
                        "src": "./img/2.png",
                        'qu_name': "睡觉睡觉"
                    },
                    {
                        "lat": 30.257497,
                        "lng": 111.37377,
                        "name": "喝水",
                        "url": 'image://img/icon/icon3.png',
                        'id': "3",
                        "src": "./img/3.png",
                        'qu_name': "喝水喝水"
                    },
                    {
                        "lat": 31.157497,
                        "lng": 111.37377,
                        "name": "加班呢",
                        "url": 'image://img/icon/icon4.png',
                        'id': "4",
                        "src": "./img/1.png",
                        'qu_name': "加班呢加班呢"
                    }
                ]
            }
        },
        mounted() {
            this.$nextTick(() => {
                window.goToDetail = this.goToDetail
            })
        },
        created() {
            this.$nextTick(() => {
                this.chartMap()
            });
        },
        methods: {
            // 地图
            chartMap: function () {
                let myChart = echarts.init(document.getElementById("chart_map"));

                let geoCoordMap = {

                };
                let data = [

                ];

                let max = 480,
                    min = 9;
                let maxSize4Pin = 1,
                    minSize4Pin = 1;
                let convertData = function (data) {
                    let res = [];
                    for (let i = 0; i < data.length; i++) {
                        let geoCoord = geoCoordMap[data[i].name];
                        console.log(data[i].name)
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                            });
                        }
                    }
                    return res;
                };

                option = {
                    tooltip: {
                        trigger: "item",
                        triggerOn: "click",
                        backgroundColor: "transparent", // 提示框背景颜色
                        enterable: true,
                        extraCssText: "border:1px solid transparent",
                        formatter: function loadData(params) {
                            return `<div  class='Mo_ban'>
                                         <img id='Mo_ban_img' src="${params.data.src}" alt="">
                                         <div id='Mo_ban_box'>
                                            <div>名字：${params.data.qu_name}</div>
                                            <div>随便：${params.data.qu_name}</div>
                                            <div>帅气：${params.data.qu_name}</div>
                                            <div>恶劣：${params.data.qu_name}</div>
                                            <div id="Mo_ban_look" onclick="goToDetail('${params.data.id}')">查看详情</div>
                                        </div>
                                    </div>`;
                        },
                    },
                    geo: {
                        // zoom: 1.2,
                        show: true,
                        map: 'hubei',
                        mapType: 'hubei',
                        label: {
                            normal: {
                                show: true,
                                textStyle: { color: "#fff" },
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(147, 235, 248, 1)",
                                borderWidth: 2,
                                areaColor: {
                                    type: "radial",
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(0,116,255,0.1)", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(0,116,255,0.1)", // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                },
                                shadowColor: "rgba(128, 217, 248, 1)",
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10,
                            },
                            emphasis: {
                                areaColor: "#389BB7",
                                borderWidth: 0,
                            },
                        },
                    },
                    series: [
                        {
                            name: '',
                            map: 'hubei',
                            type: "scatter",
                            coordinateSystem: "geo",
                            data: this.hubeiData.map(item => {
                                return {
                                    name: item.name,
                                    value: [item.lng, item.lat],
                                };
                            })
                        },
                        {
                            type: "effectScatter",
                            coordinateSystem: "geo",
                            data: convertData(
                                data
                                    .sort(function (a, b) {
                                        return b.value - a.value;
                                    })
                                    .slice(0, 47)
                            ),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            showEffectOn: "render",
                            rippleEffect: {
                                brushType: "stroke",
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: "#FFD002",
                                    shadowBlur: 1,
                                    shadowColor: "red",
                                },
                            },
                            zlevel: 1,
                        },
                        ...this.hubeiData.map((item, index) => {
                            return {
                                type: "scatter",
                                coordinateSystem: "geo",
                                //自定义图片的 位置（lng, lat）
                                data: [
                                    {
                                        name: item.name,
                                        value: [item.lng, item.lat],
                                        url: item.url,
                                        id: item.id,
                                        qu_name: item.qu_name,
                                        src: item.src
                                    }
                                ],
                                //自定义图片的 大小
                                symbolSize: [66, 66],
                                //自定义图片的 路径
                                symbol: `${item.url}`
                                // image://img/icon/icon1.png
                            }
                        })
                    ],
                }
                if (option) {
                    myChart.setOption(option);
                }
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            goToDetail(params) {
                console.log(params)
                alert(`跳转详情页--${params}`)
            },
        }
    })
</script>